<template>
  <div class="component-container">
    <el-card class="box-card" shadow="always">
      <el-row>
        <el-col :span="12">
          <el-tag type="success" v-if="category && category.name"
            >{{ category.name }} {{ attributeTypeName }}</el-tag
          >
          <el-tag type="info" v-else><i-ep-infoFilled /> 请选择商品分类</el-tag>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-form :model="formData" label-width="100" :disabled="category?.children > 0" ref="form">
          <el-form-item
            v-for="(item, index) in formData.attributes"
            :key="index"
            :label="attributeTypeName + (index + 1)"
            :prop="'attributes.' + index + '.name'"
            :rules="rules.attribute.name"
          >
            <el-input v-model="item.name" style="width: 300px" />

            <el-button
              v-if="index === 0"
              type="success"
              circle
              plain
              style="margin-left: 15px"
              @click.prevent="handleAdd()"
              ><i-ep-plus
            /></el-button>

            <el-button
              type="danger"
              plain
              circle
              style="margin-left: 15px"
              @click.prevent="handleDelete(index)"
              ><i-ep-delete
            /></el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getAttributeList, updateAttribute } from '@/api/pms/attribute'
const props = defineProps({
  attributeType: {
    type: Number,
    default: 1
  },
  category: {
    type: Object,
    default: () => {
      return {
        id: undefined,
        name: '',
        children: 0
      }
    }
  }
})
// console.log(props.category)

const attributeTypeName = computed(() => (props.attributeType === 1 ? '规格' : '属性'))

// rules 表示正则 value 当前输入的值 callback 回调函数
const attributeNameValidator = (rules: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入' + attributeTypeName.value + '名称'))
  } else {
    callback()
  }
}

const state = reactive({
  formData: {
    categoryId: undefined,
    type: 1,
    attributes: [
      {
        id: undefined,
        name: ''
      }
    ]
  },
  rules: {
    attribute: {
      name: [{ required: true, validator: attributeNameValidator, trigger: 'blur' }]
    }
  }
})
const { formData, rules } = toRefs(state)
// console.log(state.formData.attributes.name)

watch(
  () => props.category.id as any,
  () => {
    const categoryId = props.category.id
    // console.log(categoryId)

    if (categoryId) {
      getAttributeList({
        categoryId: categoryId,
        type: props.attributeType
      }).then((res) => {
        const { data } = res
        if (data && data.length > 0) {
          state.formData.attributes = res.data
        } else {
          state.formData.attributes = [
            {
              id: undefined,
              name: ''
            }
          ]
        }
        // 判断数据长度 如果有就显示 没有就不显示
      })
    } else {
      state.formData.attributes = [
        {
          id: undefined,
          name: ''
        }
      ]
    }
  }
)

const handleAdd = () => {
  state.formData.attributes.push({
    id: undefined,
    name: ''
  })
}
//删除
const handleDelete = (index: number) => {
  if (state.formData.attributes.length === 1) {
    state.formData.attributes = [
      {
        id: undefined,
        name: ''
      }
    ]
    return
  }
  state.formData.attributes.splice(index, 1)
}
//提交
const submitForm = () => {
  state.formData.categoryId = props.category.id
  state.formData.type = props.attributeType
  updateAttribute(state.formData).then(() => {
    ElMessage.success('提交成功')
  })
}
</script>

<style scoped>
</style>